<template>
	<view class="serach">

		<view class="custom-nav" :style="{
			    
			    paddingTop: `${statusBarHeight}px`
			  }">

			<view class="search-container" :style="{ height: `${searchBarHeight}px` }">
				<view class="back-icon" @tap="goBack">
					<image src="/static/img/arrow-right.png" mode="aspectFit" class="icon-image"></image>
				</view>
				<view class="search-box">
					<!-- 搜索图标 -->
					<image class="search-icon" src="/static/img/search-icon2.png"></image>

					<!-- 输入框 -->
					<input class="search-input" type="text" placeholder="请输入搜索内容" placeholder-class="placeholder-style"
						v-model="searchKeyword" @confirm="handleSearch" @input="handleInput" />
					<view v-if="searchKeyword" class="clear-btn" @click="clearSearch">
						×
					</view>
				</view>
			</view>
		</view>
		<view :style="{ marginTop: `${statusBarHeight + searchBarHeight}px` }" class="list">

			<!-- 搜索结果列表 -->
			<block v-if="list.length > 0 && showList">
				<view class="list-item" v-for="(item, index) in list" :key="index" @tap="toShow(item)">
					<rich-text :nodes="highlightText(item.name)"></rich-text>
					<rich-text :nodes="highlightText(item.local)"></rich-text>
					<rich-text :nodes="highlightText(item.date_describe)"></rich-text>
				</view>
			</block>

			<!-- 显示选中的内容 -->
			<view v-if="selectedItem && !showList" class="image-container" @tap="toAlbum">
				<image :src="selectedItem.banner" mode="aspectFill" class="album-image"></image>
				<view class="album-content">
					<view class="flex-s">
						<view>
							<view class="album-title">{{ selectedItem.name }}</view>
							<view class="flex-box">
								<text class="album-desc">{{ selectedItem.local }}</text>
								<text class="album-desc">{{ selectedItem.date_describe }}</text>
							</view>
						</view>
						<view v-if="selectedItem.status == 1">
							<image class="jxz-icon"
								src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250328/b25c7cdb27cc41d5b4a8208a0f6bb9b1.png"
								mode=""></image>
						</view>
					</view>
					<view class="album-footer">
						<text class="image-count">{{ selectedItem.image_num }}张图片</text>
						<view class="view-more" :style="{background: t('color1')}">
							<text>查看更多</text>
							<image src="/static/img/arrowright.png" mode="aspectFit" class="more-icon"></image>
						</view>
					</view>
				</view>
			</view>

			<nodata v-if="list.length === 0"></nodata>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				statusBarHeight: 0, // 状态栏高度（系统决定）
				titleBarHeight: 44, // 导航栏标题高度（默认44px）
				searchBarHeight: 36, // 搜索框高度（根据设计稿调整）
				searchKeyword: '',
				searchTimer: null, // 防抖计时器
				debounceTime: 200, // 防抖延迟时间(毫秒)

				list: [],
				defaultList: [],
				selectedItem: null,
				showList: true
			}
		},
		onLoad() {
			// 获取系统信息
			const systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight || 0

			// 微信小程序需要计算胶囊按钮位置
			// #ifdef MP-WEIXIN
			const menuRect = wx.getMenuButtonBoundingClientRect()
			this.titleBarHeight = menuRect.bottom + menuRect.top - this.statusBarHeight
			// #endif
		},
		computed: {
			navBarHeight() {
				return this.statusBarHeight + this.titleBarHeight + this.searchBarHeight + 10
			},
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			toShow(item) {
				this.selectedItem = item;
				this.showList = false;
			},
			toAlbum() {
				uni.navigateTo({
					url: `/pagesSocial/album/album?share_type=1&album_id=${this.selectedItem.id}`
				})
			},
			highlightText(text) {
				if (!text || !this.searchKeyword) return this.formatText(text);
				let navConfig = uni.getStorageSync('navConfig');
				let highlightColor = navConfig.backgroundColor;

				const keyword = this.searchKeyword;
				const regex = new RegExp(this.escapeRegExp(keyword), 'gi');
				const parts = String(text).split(regex);

				if (parts.length <= 1) return this.formatText(text);

				const nodes = [];
				let match;
				let lastIndex = 0;
				const re = new RegExp(this.escapeRegExp(keyword), 'gi');

				while ((match = re.exec(text)) !== null) {
					if (match.index > lastIndex) {
						nodes.push({
							type: 'text',
							text: text.slice(lastIndex, match.index)
						});
					}

					nodes.push({
						type: 'node',
						name: 'span',
						attrs: {
							style: `color: ${highlightColor}; font-weight: bold;`
						},
						children: [{
							type: 'text',
							text: match[0]
						}]
					});

					lastIndex = match.index + match[0].length;
				}

				if (lastIndex < text.length) {
					nodes.push({
						type: 'text',
						text: text.slice(lastIndex)
					});
				}

				return nodes;
			},

			escapeRegExp(string) {
				return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
			},

			formatText(text) {
				return [{
					type: 'text',
					text: String(text)
				}];
			},
			handleSearch() {
				if (this.searchKeyword.trim()) {
					this.doSearch(this.searchKeyword);
				}
			},

			handleInput(e) {
				this.searchKeyword = e.detail.value;
				if (!this.searchKeyword.trim()) {
					this.list = [];
					clearTimeout(this.searchTimer); // 清除可能存在的定时器
					return;
				}
				// 清除之前的定时器
				clearTimeout(this.searchTimer);

				// 设置新的定时器
				this.searchTimer = setTimeout(() => {
					this.doSearch(this.searchKeyword);
				}, this.debounceTime);
			},

			// 实际执行搜索的方法
			doSearch(keyword) {
				if (!keyword.trim()) {
					// 如果关键词为空，可以重置显示或返回
					return;
				}

				const that = this;
				app.get('SocialSourceAlbum/list', {
					keyword: keyword
				}, function(res) {
					if (res.status == 200) {
						that.list = res.data;

					} else {
						app.error(res.msg);
					}
				});
			},
			clearSearch() {
				this.searchKeyword = '';
				this.list = []
			}
		},
	}
</script>

<style lang="scss" scoped>
	.serach {
		background: #fff;
		height: 100vh;
	}

	.custom-nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		background: #fff;
		z-index: 1000;
	}

	.title-bar {
		display: flex;
		align-items: center;
		padding: 0 15px;
	}

	.search-container {

		display: flex;
		align-items: center;
		width: 65%;

		.icon-image {
			width: 60rpx;
			height: 60rpx;

		}
	}



	/* 搜索框容器 */
	.search-box {
		display: flex;
		align-items: center;
		background: #f5f5f5;
		border-radius: 20px;
		padding: 0 15px;
		height: 40px;
	}

	/* 搜索图标 */
	.search-icon {
		width: 16px;
		height: 16px;
		margin-right: 8px;
	}

	/* 输入框 */
	.search-input {
		flex: 1;
		height: 100%;
		font-size: 14px;
	}

	.list {
		padding: 0 20rpx;
	}

	.list-item {
		display: flex;
		gap: 10rpx;
		padding: 20rpx;
		border-bottom: 1px solid #eee;
	}

	.list-item text {
		margin-right: 10rpx;
	}

	.clear-btn {
		color: #999;
		font-size: 20px;
		padding: 0 5px;
	}

	.image-container {
		position: relative;
		width: 100%;
		top: 20rpx;
	}

	.album-image {
		width: 100%;
		height: 180rpx;
		position: relative;
	}

	.album-content {
		padding: 20rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;

		.album-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #fff;
			margin-bottom: 10rpx;
		}

		.album-desc {
			font-size: 28rpx;
			color: #fff;
			margin-bottom: 20rpx;
		}

		.album-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.image-count {
				font-size: 24rpx;
				color: #fff;
			}

			.view-more {
				display: flex;
				align-items: center;
				background-color: #f8f8f8;
				padding: 6rpx 10rpx;
				border-radius: 30rpx;

				text {
					font-size: 24rpx;
					color: #fff;
					margin-right: 10rpx;
				}

				.more-icon {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}

	.flex-box text:not(:last-child)::after,
	.flex-box text:not(:last-child)::after {
		content: "|";
		margin: 0 8px;
		color: #ccc;
	}

	.jxz-icon {
		width: 80rpx;
		height: 80rpx;
	}

	.flex-s {
		display: flex;
		justify-content: space-between;
	}
</style>